list 태그
✒️ 2025-05-16 11:10 내용 수정
- 리스트 형식의 데이터를 출력할 때 사용한다.
<ul>,<ol>,<dl>이 있고, List의 요소는<li>,<dt>등으로 표시한다.- ul 태그와 ol 태그 하위에는 반드시 li 태그만 와야 하며, 다른 태그는 li 태그 내에 작성해야 한다.
- List 안에 List를 넣을 수 있다.
- 지금 마크 다운으로 작성하는 이 부분에서 탭으로 항목을 안에 넣은 식으로 작성이 가능하다.
- List안에 List안에 List를 넣을 수 있다.
- 지금 마크 다운으로 작성하는 이 부분에서 탭으로 항목을 안에 넣은 식으로 작성이 가능하다.
<ul>
<li><p>p태그 내용</p></li>
<li>
<ul>
<li>li 내용</li>
</ul>
</li>
</ul>
| 태그 | 속성 | 설명 |
|---|---|---|
<ul> |
Unordered List, 순서가 없는 리스트 태그 | |
<ol> |
Ordered List, 순서가 있는 리스트 태그 | |
type="타입" |
지정한 타입으로 <li>를 설정 | |
<li> |
List Item, 리스트 내의 요소들을 표시하는 태그 | |
| <ul>에서는 닷 표기로, <ol>에서는 숫자 항목으로 표시 | ||
<dl> |
Description List, 용어에 대한 설명을 위한 구조로 구성된 태그 | |
<dt> |
<dl>의 행을 정하는 태그 | |
<dd> |
<dl>의 항목을 설명하는 태그 |
- 수업 내용에 맞춰 아래 코드를 수정함(20231229)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>ul태그는 순서가 없는 리스트를 만듭니다.</li>
<li>리스트 요소는 li태그로 추가합니다.</li>
<li>여러 개의 요소를 추가할 수 있습니다.</li>
<li><a href="#">링크</a>를 요소로 넣을 수 있습니다.</li>
<li>
<ul>
<li>ul 안에 다른 ul을 넣을 수 있습니다.</li>
<li>2번째 ul의 요소입니다.</li>
</ul>
</li>
</ul>
<hr>
<ol>
<li>ol태그는 순서가 있는 리스트를 만듭니다.</li>
<li>ol태그의 요소도 li태그로 추가합니다.</li>
<li>요소들은 넘버링을 가집니다.</li>
<li> ol태그 안에 ol을 넣을 수 있습니다.
<ol type="A">
<li>li태그 스타일을 바꿀 수 있습니다.</li>
<li></li>
</ol>
</li>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<dl>
<dt>dl태그는 용어 설명을 위해 사용합니다.</dt>
<dt>dl태그의 행을 정의합니다.</dt>
<dd>dl태그의 항목을 설명합니다.</dd>
</dl>
<dl>
<dt>bear</dt>
<dd>곰</dd>
<dd>참다, 견디다</dd>
</dl>
</body>
</html>
